<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国色-中国传统颜色</title>
    <link rel="stylesheet" href="css/5ab3a119f629d80eb8e651af.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="container">
        <!--        //中国色的logo-->
        <header class="logo">
            <h1>中国色,Chinese Colors</h1>
        </header>

        <nav class="color_card">
            <ul class="type_nav">
                <li class="all">全</li>
                <li class="purple">紫</li>
                <li class='red'>红</li>
                <li class="gray">灰</li>
                <li class="blue">蓝</li>
                <li class="green">绿</li>
                <li class="yellow">黄</li>
                <li class="other">杂</li>
            </ul>
            <ul id="colorBox" class="color_box">
            </ul>
        </nav>

        <section class="color_info" id="colorInfo">
           
            <h2>
                <span class="rgb_cx16">#666666</span>
                <div>
                    <span class="name">中国色</span>
                </div>
            </h2>
        </section>

        <section class="value_box">
            <div class="color_value">
                <div id="CMYK_Value" class="cmyk_value">
                    <p class="CMYK_font">C</p>
                    <div class="c">
                        <span class="cfont">0</span>
                        <span class="circle"></span>
                        <span class="r">
            <span class="line"></span>
                        </span>
                        <span class="l">
            <span class="line" style="transform: rotate(180deg)"></span>
                        </span>
                    </div>
                    <p class="CMYK_font">M</p>
                    <div class="m">
                        <span class="cfont">0</span>
                        <span class="circle"></span>
                        <span class="r">
            <span class="line" ></span>
                        </span>
                        <span class="l">
            <span class="line" style="transform: rotate(180deg)" ></span>
                        </span>
                    </div>
                    <p class="CMYK_font">Y</p>
                    <div class="y">
                        <span class="cfont">0</span>
                        <span class="circle"></span>
                        <span class="r">
            <span class="line" ></span>
                        </span>
                        <span class="l">
            <span class="line"  style="transform: rotate(180deg)"></span>
                        </span>
                    </div>
                    <p class="CMYK_font">K</p>
                    <div class="k">
                        <span class="cfont">0</span>
                        <span class="circle"></span>
                        <span class="r">
            <span class="line" ></span>
                        </span>
                        <span class="l">
            <span class="line"  style="transform: rotate(180deg)"></span>
                        </span>
                    </div>
                </div>
                <div id="rgbValue" class="rgb_value">
                    <p class="CMYK_font">R</p>
                    <div class="rgb_num">
                        <div class="num_1">
                            <span>2</span>
                            <span>1</span>
                            <span>0</span>
                        </div>
                        <div class="num_2" style="transform: translateY(-105.5px)">
                            <span>9</span>
                            <span>8</span>
                            <span>7</span>
                            <span>6</span>
                            <span>5</span>
                            <span>4</span>
                            <span>3</span>
                            <span>2</span>
                            <span>1</span>
                            <span>0</span>
                        </div>
                        <div class="num_3" style="transform: translateY(-105.5px)">
                            <span>9</span>
                            <span>8</span>
                            <span>7</span>
                            <span>6</span>
                            <span>5</span>
                            <span>4</span>
                            <span>3</span>
                            <span>2</span>
                            <span>1</span>
                            <span>0</span>
                        </div>
                    </div>
                    <p class="CMYK_font">G</p>
                    <div class="rgb_num">
                        <div class="num_1">
                            <span>2</span>
                            <span>1</span>
                            <span>0</span>
                        </div>
                        <div class="num_2" style="transform: translateY(-105.5px)">
                            <span>9</span>
                            <span>8</span>
                            <span>7</span>
                            <span>6</span>
                            <span>5</span>
                            <span>4</span>
                            <span>3</span>
                            <span>2</span>
                            <span>1</span>
                            <span>0</span>
                        </div>
                        <div class="num_3" style="transform: translateY(-105.5px)">
                            <span>9</span>
                            <span>8</span>
                            <span>7</span>
                            <span>6</span>
                            <span>5</span>
                            <span>4</span>
                            <span>3</span>
                            <span>2</span>
                            <span>1</span>
                            <span>0</span>
                        </div>
                    </div>
                    <p class="CMYK_font">B</p>
                    <div class="rgb_num">
                        <div class="num_1">
                            <span>2</span>
                            <span>1</span>
                            <span>0</span>
                        </div>
                        <div class="num_2" style="transform: translateY(-105.5px)">
                            <span>9</span>
                            <span>8</span>
                            <span>7</span>
                            <span>6</span>
                            <span>5</span>
                            <span>4</span>
                            <span>3</span>
                            <span>2</span>
                            <span>1</span>
                            <span>0</span>
                        </div>
                        <div class="num_3" style="transform: translateY(-105.5px)">
                            <span>9</span>
                            <span>8</span>
                            <span>7</span>
                            <span>6</span>
                            <span>5</span>
                            <span>4</span>
                            <span>3</span>
                            <span>2</span>
                            <span>1</span>
                            <span>0</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="search">
        <div class="pull_btn" id="pullBtn" name="in">
            <img src="images/draw_d.png" alt="">
        </div>

        <div class="search_box">
            <input type="text" id="search_val" placeholder="输入名字或带#的16进制">
            <div class="search_btn"></div>
            <ul class="search_result" id="search_result">
            </ul>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/createCard.js"></script>
    <script>
        window.onload = function() {
            function getData() {
                $.ajax({
                    type: 'GET',
                    url: '/loader?type=all',
                    success: (data) => {
                        if (data) {
                            createCard(data)
                            return;
                        } else {
                            getData();
                        }
                    }
                })
            }

            getData();

        }
    </script>
    <!-- <script src="js/drawCanvas.js"></script> -->
</body>

</html>